.tv-container {
    position: relative;
    width: 300px;
    height: 200px;
    background: black;
    border-radius: 10px;
    overflow: hidden;
    animation: tvShadow 3.5s infinite;
}

.test-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
        #C0C0C0 14.28%, 
        #BDBD00 14.28% 28.56%, 
        #00CCCC 28.56% 42.84%, 
        #00CC00 42.84% 57.12%, 
        #CC00CC 57.12% 71.4%, 
        #CC0000 71.4% 85.68%, 
        #0000CC 85.68% 100%
    );
    animation: tvOnOff 3.5s infinite;
}

.bars {
    position: absolute;
    bottom: 0;
    height: 25px;
    width: 100%;
    display: flex;
}

.bars div {
    flex: 1;
}

.bar-1 { background: #000080; }
.bar-2 { background: white; }
.bar-3 { background: #4B0082; }
.bar-4 { background: black; }
.bar-5 { background: black; }

@keyframes tvOnOff {
    0%, 20% {
        opacity: 0;
    }
    30%, 80% {
        opacity: 1;
    }
    90%, 100% {
        opacity: 0;
    }
}

@keyframes tvShadow {
    0%, 20% {
        box-shadow: none
    }
    30%, 80% {
        box-shadow: 0 0 20px gray
    }
    90%, 100% {
        box-shadow: none
    }
}

.loading-text {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
    color: white;
    position: relative;
    height: 40px; /* Adjust based on text height */
    overflow: hidden;
}

.text-item {
    opacity: 0;
    animation: textOpacity 3.5s infinite;
}

@keyframes textOpacity {
    0%, 20% {
        opacity: 0;
    }
    30%, 80% {
        opacity: 1;
    }
    90%, 100% {
        opacity: 0;
    }
}

.loading-center {
    text-align: center;
    margin-top: 20%;
}